<template>
  <div class="tableData" ref="tab">
    <comm-table 
    :tableData="provinceList" 
    :option="option"
    :thclass="thclass"
    @sendData="sendData" 
    >
    </comm-table>
    <van-popup 
      v-model="show"
      position="bottom"
      :style="{ height: '100%' }">
      <div class="title">
        <button type="default" @click="show = false">
          <van-icon name="cross" size="0.5rem"/>
        </button>
        <b>{{cityName}}</b>
      </div>
      <comm-table :tableData="cityList" :option="option"></comm-table>
    </van-popup>
  </div>
</template>

<script>
import CommTable from "@/components/CommTable.vue"
import api from "@/api/index.js";
export default {
  name:'Covtable',
  components:{
    CommTable
  },
  data(){
    return {
      show:false,
      provinceList:[],
      option: {
        column: [
          {
            label: '疫情地区',
            prop: 'name'
          },
          {
            label: '新增',
            prop: 'covAdd'
          },
          {
            label: '现存',
            prop: 'econNum'
          },
          {
            label: '累计',
            prop: 'total'
          },
          {
            label: '治愈',
            prop: 'cure'
          },
          {
            label: '死亡',
            prop: 'deathNum'
          },
        ]
      },
      cityList:[],
      cityName:'',
      thclass:""
    }
  },
  methods:{
    sendData(val){
      this.cityList = []
      console.log(val)
      this.show = true;
      this.cityList = [...val.city]
      this.cityName = val.name
      // this.provinceList.some(item=>{
      //   if(item.name === val ) this.cityList = [...item.city]
      // })
    },
    getData(){
      api.getTable((data)=>{
        data.data.list.forEach(item=>{
          const obj = {}
          obj.name = item.name
          //新增
          obj.covAdd = item.conadd
          //现有
          obj.econNum = parseInt(item.econNum)
          //累计
          obj.total = item.value
          //治愈
          obj.cure = item.cureNum
          //死亡
          obj.deathNum = item.deathNum
          //遍历区市
          obj.city = []
          item.city.forEach(i=>{
            const city = {}
            city.name = i.name
            city.covAdd = i.conadd
            city.econNum = parseInt(i.econNum)
            city.total = i.conNum
            city.cure = i.cureNum
            city.deathNum = i.deathNum
            obj.city.push(city)
          })
          obj.city.sort((a,b)=>b.econNum === a.econNum?0:b.econNum>a.econNum?1:-1)
          this.provinceList.push(obj)
        })
        this.provinceList.sort((a,b)=>b.econNum === a.econNum?0:b.econNum>a.econNum?1:-1)
      })
    },
  },
  created(){
    this.getData()
  },
  mounted(){
    window.onscroll = ()=>{
      if(this.$route.path.split("/")[1]!=="") return
      //if () return ;
       //console.log( this.$refs.tab.getBoundingClientRect().top)
      if(this.$refs.tab.getBoundingClientRect().top < 0
      &&this.$refs.tab.getBoundingClientRect().top > (this.$refs.tab.offsetHeight-75)*-1)
      {
          this.thclass = "fixedtop"
      }else{
          this.thclass = ""
        }
    }
  }
}
</script>

<style lang="less" scoped>
.tableData{
  margin: 0.4rem 0;
}
.title{
  padding: 5px 10px;
  background-color: #4169e2;
  color: #fff;
  font-size: 0.4rem;
  button{
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    border: none;
    background-color: rgba(255,255,255,0);
  }
  button:hover{
    background-color: rgba(255, 255, 255, 0.342);
  }
}
</style>